<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index/advise/list' }">公司留言板</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row class="margintop20">
        <el-col>
            <el-table
            :data="list"
                style="width:100%"
                class="tableinfo margin20"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
               
            >
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="发布时间" prop="time" sortable>
                    <template slot-scope="scope">
                        {{scope.row.time | timeFormat('YY-MM-DD HH:mm')}}
                    </template>
                </el-table-column>
                <el-table-column label="标题" prop="title"></el-table-column>
                 <el-table-column label="内容" prop="content" width="250" style="white-space:nowrap;overflow:hidden">
                    <template slot-scope="scope">
                        <el-popover
                        placement="top-start"
                        title="内容"
                        width="250"
                        trigger="hover"
                        >
                            <div v-html="scope.row.content"></div>
                            <span slot="reference" v-html="scope.row.content.substr(0,30)+(scope.row.content.length>30 ? '...' : '')"></span>
                        </el-popover>
                    </template>
                     </el-table-column>
                <el-table-column label="分类" prop="category" width="150">
                    <template slot-scope="scope">
                        <el-tag  size="mini" >
                            {{scope.row.category}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="发布人" prop="username"></el-table-column>
                <el-table-column label="操作" width="220">
                        <template slot-scope="scope">
                            <el-button size="mini" type="info" @click="replayadviseone(scope.row)">回复</el-button>
                            <el-button @click="editAdvise(scope.row)" v-if="scope.row.mobile==mobile" size="mini" type="success" >编辑</el-button>
                            <el-popconfirm
                                v-if="scope.row.mobile==mobile"
                                confirmButtonText='好的'
                                cancelButtonText='不用了'
                                icon="el-icon-info"
                                iconColor="red"
                                title="你确定要删除吗？"
                                @onConfirm="delAdviseOne(scope.row)"
                                >
                                <el-button size="mini" slot="reference" type="danger">删除</el-button>
                                </el-popconfirm>
                        </template>
                    </el-table-column>
            </el-table>
        </el-col>
        </el-row>
    </div>
</template>

<script>
import {getadviselist,delAdviseOne} from "@/api"
const colors = ["success","primary","danger","info","warning"]
export default {
    data(){
        return {
            list:[],
             colors,
             mobile:localStorage.getItem("mobile")
        }
    },
  
    methods:{
        delAdviseOne(row){
            delAdviseOne({
                _id:row._id
            })
            .then(res=>{
                if(res.type){
                    this.list = this.list.filter(item=> item._id !== row._id)
                }
            })
        },
        replayadviseone(row){
            this.$router.push({name:"advisereply",params:{id:row._id}})
        },
        editAdvise(row){
            this.$router.push({name:"adviseedit",params:{id:row._id}})
        },
        getTableList(params){
            getadviselist(params)
            .then(res=>{
                console.log(res)
                if(res.type){
                
                    this.list  = res.result;

                }
            })
        }
    },
    mounted(){
       this.getTableList()
    },
}
</script>